<header fxLayout fxLayoutAlign="start center" class="NoteHeader">
    <div *ngIf="noteSelectionExists" fxLayout fxLayoutAlign="start center" fxFlex="1 1 auto"
         class="NoteHeader__title">
        <div *ngIf="status" [style.backgroundColor]="statusBarColor"
             class="NoteHeader__statusBar"></div>
        <h1 id="selected-note-title">{{ selectedNote.title }}</h1>
        <div *ngIf="status" [innerHTML]="statusIcon" class="NoteHeader__statusIcon"></div>
    </div>

    <div *ngIf="noteSelectionExists" fxLayout fxLayoutAlign="start center" class="NoteHeader__toolbar">
        <button gd-icon-button aria-label="Change editor view mode"
                (click)="openEditorViewModeMenu()" id="note-change-editor-view-mode-button">
            <gd-icon name="eye"></gd-icon>
        </button>
        <button gd-button [disabled]="!canCommit" (click)="openCommitDialog()"
                gdTooltip="Commit Note (⌘+K)" color="primary" class="NoteHeader__commitButton">
            Commit
        </button>
    </div>
</header>
